import React, { Component } from 'react'
import echarts from "echarts"

export default class Echarts extends Component {
  constructor(){
    super();
    this.state={
      chart:null,
      options:{
        color:["#decdc3","#ea5455",'#2d4059'],
        title: {
          text: '市场分析'
        },
        tooltip: {},
          legend: {
            data:['销量','价格']
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [
          {
            name: '销量',
            type: 'line',
            smooth:true,
            data: [5, 20, 36, 10, 10, 20]
            },
          {
            name: '价格',
            type: 'line',
            smooth:true,
            data: [10, 50, 16, 104, 20, 60]
          },
          ]
      }
    }
  }
  render() {
    return (
      <>
      {/* 获取dom元素的方法之一 */}
        <div id="charts" style={{ minHeight:300 }} ref={(charts)=>{ this.charts = charts }}/>
      </>
    )
  }
  componentDidMount(){
    this.initCharts()
  }
  initCharts=()=>{
    let charts = echarts.init(this.charts);
		this.setState({
			chart:charts
		},()=>{
			this.state.chart.setOption(this.state.options);
		})
  }
}
